<template>
	<view class="A">
		<view class="content">
			<view class="content-font">
				<text class="content-span">用户名</text>
				<text class="content-tips" v-show="tipsA.phoneNumber == 1">请输入手机号</text>
				<text class="content-tips" v-show="tipsA.phoneNumber == 2">手机号格式不正确</text>
			</view>
			<view class="content-input">
				<input type="number" placeholder="请输入手机号" v-model="userA.phoneNumber" @blur="blurUser" />
			</view>
		</view>
		<view class="content">
			<view class="content-font">
				<text class="content-span">密码</text>
				<text class="content-tips" v-show="tipsA.password == 1">请输入密码</text>
				<text class="content-tips" v-show="tipsA.password == 2">密码格式或长度不正确</text>
			</view>
			<view class="content-input">
				<input :type="iconEye == 1 ? 'password' : 'type'" ref="password" placeholder="请输入8~16位密码" v-model="userA.password" @blur="blurPassword" maxlength="16" class="aaaaaa" />
				<view class="iconfont iconzhengyan" v-show="iconEye == 1" @click="clickChange(0)"></view>
				<view class="iconfont iconbiyan" v-show="iconEye == 0" @click="clickChange(1)"></view>
			</view>
		</view>
		<view class="content">
			<view class="button" v-show="iconButton == 0" @click="clickButton">
				<view class="iconfont iconyoujiantou"></view>
			</view>
			<view class="button buttton-an" v-show="iconButton == 1">
				<view class="iconfont iconyoujiantou"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '../../../request/api.js'
import utils from '../../../utils/util.js'
import users from '../../user.js'
export default {
	name: 'LoginA',
	data() {
		return {
			iconEye: 1,
			iconButton: 1,
			userA: {
				phoneNumber: '',
				password: ''
			},
			tipsA: {
				phoneNumber: 0,
				password: 0
			},
			users: true
		}
	},
	watch:{
		'userA.phoneNumber': {
			handler(newName, oldName) {
				
				if(this.userA.phoneNumber.length == 11)
				{
					this.tipsA.phoneNumber = 3;
				}else
				{
					this.iconButton = 1;
					this.tipsA.phoneNumber = 4;
				}
				if(this.tipsA.phoneNumber == 3 && this.tipsA.password == 3)
				{
					this.iconButton = 0;
				}
			},
			// immediate: true,
			deep: true
		},
		'userA.password':{
			handler(newName, oldName) {
				if(this.userA.password.length > 8)
				{
					this.tipsA.password = 3;
				}else
				{
					this.iconButton = 1;
					this.tipsA.password = 4;
				}
				if(this.tipsA.phoneNumber == 3 && this.tipsA.password == 3)
				{
					this.iconButton = 0;
				}
			},
			deep: true
		}
	},
	methods: {
		clickChange(e) {
			this.iconEye = e;
		},
		clickButton() {
			login({
				username: this.userA.phoneNumber,
				password: this.userA.password
			}).then(res => {
				utils.setStorageData('token',{
					username: this.userA.phoneNumber,
					password: this.userA.password,
				}).then(res => {
					this.dataInit(this.userA.phoneNumber)
				})
			})
		},
		dataInit(userID) {
			uni.showLoading({
				title: '加载中'
			})
			//测试数据
			if(userID == '15092095518' && this.users == true)
			{
				utils.setStorageData(userID+'userInfo',{
					portrait: "/static/img/user/man.png",
					petName: "lemo",
					opportunity: true,
					briefIntroduction: "没有什么",
					name: "毛智超",
					sex: "男",
					birthday: "1997-04-29",
					constellation: "金牛座",
					emotionalState: "单身",
					address: "山东",
					hometown: "",
					school: [],
					company: ''
				});
				utils.setStorageData(userID+'dynamics',{
					dynamics:[{
						content: '正在更新...',
						imgUrl:'/static/img/dynamics/111.png',
						label: '官方公告',
						browse: 112,
						comment: 58,
						fabulous: 101
					}]
				})
				utils.setStorageData(userID+'follow',{
					follow:[
						{
							petName: 'neoo',
							portrait: '../static/img/user/woman.png',
							personalProfile: '阿打算打算发顺丰三法师'
						}
					]
				})
				utils.setStorageData(userID+'fans',{
					fans:[{
						petName: 'neoo',
						portrait: '../static/img/user/woman.png',
						personalProfile: '阿打算打算发顺丰三法师'
					}]
				})
				utils.setStorageData(userID+'authentication',{
					authentication:[]
				})
			}
			else if(userID == "13070848717" && this.users == true) {
				utils.setStorageData(userID+'userInfo',{
					portrait: "/static/img/user/woman.png",
					petName: "neoo",
					opportunity: true,
					briefIntroduction: "没有什么849",
					name: "王帅",
					sex: "女",
					birthday: "1998-05-16",
					constellation: "天秤座",
					emotionalState: "恋爱中",
					address: "山东",
					hometown: "",
					school: [],
					company: ''
				});
				utils.setStorageData(userID+'dynamics',{
					dynamics:[{
						content: '正在维护...',
						imgUrl:'/static/img/dynamics/111.png',
						label: '官方公告',
						browse: 98,
						comment: 35,
						fabulous: 82
					}]
				})
				utils.setStorageData(userID+'follow',{
					follow:[
						{
							petName: 'lemo',
							portrait: '../static/img/user/man.png',
							personalProfile: '没有什么'
						}
					]
				})
				utils.setStorageData(userID+'fans',{
					fans:[{
						petName: 'neoo',
						portrait: '../static/img/user/man.png',
						personalProfile: '没有什么'
					}]
				})
				utils.setStorageData(userID+'authentication',{
					authentication:[]
				})
			}
			wx.hideLoading();
			setTimeout(()=>{
				uni.redirectTo({
					url: '../../pages/homePage'
				});
			},100)
		},
		blurUser() {
			if(this.userA.phoneNumber == '')
			{
				this.tipsA.phoneNumber = 1;
			}
			else if(this.userA.phoneNumber.length != 11) {
				this.tipsA.phoneNumber = 2;
			}
		},
		blurPassword() {
			if(this.userA.password == '')
			{
				this.tipsA.password = 1;
			}
			else if(this.userA.password.length < 8){
				this.tipsA.password = 2;
			}
			else{
				this.tipsA.password = 3;
			}
		}
	}
}
</script>

<style>
	.A{
		height: 600rpx;
		margin-top: 60rpx;
	}
	.content{
		margin-bottom: 40rpx;
	}
	.content-font{
		width: auto;
		margin-right: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.content-span{
		color: #5B5B5B;
		font-size: 32rpx;
		margin-left: 60rpx;
		letter-spacing:2rpx;
	}
	.content-tips{
		color: red;
		font-size: 24rpx;
	}
	.content-input{
		height: 72rpx;
		border: 4rpx solid #FE6542;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		width: auto;
		margin-right: 100rpx;
		margin-left: 60rpx;
		margin-top: 14rpx;
	}
	input{
		font-size: 34rpx;
		caret-color: #FE6542;
		text-indent:20rpx;
		background: transparent;
		flex: 1;
	}
	.iconzhengyan,.iconbiyan{
		margin-right: 14rpx;
		font-size: 40rpx;
	}
	.iconbiyan{
		width: 48rpx;
	}
	.button{
		width: 80rpx;
		height: 80rpx;
		background-color: #FE6542;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.iconyoujiantou{
		font-size: 50rpx;
		font-weight: 550;
	}
	.buttton-an{
		background-color: #6C6C6C;
	}
	.aaaaaa{
		font-size: 32rpx;
		caret-color: #FE6542;
		text-indent: 6rpx; 
		letter-spacing: 0.4rpx;
		flex: 1;
		height: 62rpx;
		outline: none;
		border: none;
		margin-left: 10rpx;
		font-family: '微软雅黑';
	}
</style>
